<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/static/bootstrap/main/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/bootstrap/table/css/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/bootstrap/fileinput/css/fileinput.min.css}" rel="stylesheet"/>
    <link rel="stylesheet"  th:href="@{/static/layui/css/layui.css}"  media="all">
</head>
<body>
<h2>流程模型列表</h2>
<div id="toolbar">
    <form class="form-inline">
        <button id="create" type="button" class="btn btn-success">新建流程模型</button>
    </form>
</div>
<table id="mytable"></table>
<div class="file-loading" >
    <input id="fileModel" name="fileModel" multiple type="file" class="file">
</div>
</body>
<script th:src="@{/static/bootstrap/jquery/jquery-3.3.1.min.js}"></script>
<script th:src="@{/static/bootstrap/main/js/bootstrap.min.js}"></script>
<script th:src="@{/static/bootstrap/table/js/bootstrap-table.min.js}"></script>
<script th:src="@{/static/bootstrap/table/js/bootstrap-table-zh-CN.min.js}"></script>
<script th:src="@{/static/bootstrap/fileinput/js/fileinput.js}"></script>
<script th:src="@{/static/bootstrap/fileinput/locales/zh.js}"></script>
<script th:src="@{/static/layui/layui.js}"></script>
<script>
    var layer;
    layui.use('layer', function() { //独立版的layer无需执行这一句
        layer = layui.layer; //独立版的layer无需执行这一句
    });
    $(document).ready(function () {
        window.operateEvents = {
            "click #fb" : function (e,value,row,index) {
                var id=row.id;
                $.ajax({
                    url:"/models/deployment/"+id,
                    type:"POST",
                    success:function(res){
                        alert(res);
                        location.reload();
                    }
                });
            },
            "click #bj" : function (e,value,row,index) {
                var id=row.id;
                layer.open({
                    type: 2
                    ,offset: 'auto' //具体配置参考
                    ,id: 'layerDemo' //防止重复弹出
                    ,area: ['99%', '99%']
                    ,content: "../models/find/" +id
                    ,btn: '关闭'
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0 //不显示遮罩
                    ,yes: function(){
                        layer.closeAll();
                    }
                });
            },
            "click #sc" : function (e,value,row,index) {
                var id=row.id;
                $.ajax({
                    url:"/models/delete/model/"+id,
                    type:"POST",
                    success:function(res){
                        alert(res);
                        location.reload();
                    }

                });
            }
        }

        $("#mytable").bootstrapTable({
            url:"/models/modelList",   //请求地址
            method:"GET",
            striped : true, //是否显示行间隔色
            pageNumber : 1, //初始化加载第一页
            pagination : true,//是否分页
            sidePagination : 'server',//server:服务器端分页|client：前端分页
            pageSize : 5,//单页记录数
            pageList : [ 5, 10, 20],//可选择单页记录数
            showRefresh : true,//刷新按钮
            toolbar: "#toolbar",
            queryParams : function(params) {//上传服务器的参数
                var temp = {
                    page :params.offset + 0,// SQL语句起始索引
                    limit : params.limit  // 每页显示数量
                };
                return temp;
            },
            responseHandler: function(res){
                return {
                    "total":res.limit,
                    "rows" : res.data.records
                };
            },columns : [ {
                title : 'id',
                field : 'id'
            },{
                title : '模型名称',
                field : 'name'
            }, {
                title : 'key',
                field : 'key',
            }, {
                title : '模型描述数据',
                field : 'metaInfo',
            },{
                title : '版本',
                field : 'version',
                sortable : true
            },/*{
                title : '部署ID',
                field : 'deploymentId',
            },*/{
                title : '创建时间',
                field : 'createTime',
                sortable : true,
                formatter: function (value, row, index) {
                    return changeDateFormat(value);
                },
            },{
                title : '最后更新时间',
                field : 'lastUpdateTime',
                sortable : true,
                formatter: function (value, row, index) {
                    return changeDateFormat(value);
                },
            }, {
                field:'controller',
                title: '操作',
                width: 250,
                align: 'center',
                valign: 'middle',
                events: operateEvents,
                formatter: actionFormatter
            }],
            onLoadSuccess: function () {
            },
            onLoadError: function () {
            },
            onDblClickRow: function (row, $element) {
            },
        });

        /**
         * 按钮设置
         */
        function actionFormatter(value,row,index) {
            var button = "<button id='fb' type=\"button\" class=\"btn btn-primary\">发布</button>&nbsp;&nbsp;" +
                "<button id='bj' type=\"button\" class=\"btn btn-info\">编辑流程</button>&nbsp;&nbsp;" +
                "<button id='sc' type=\"button\" class=\"btn btn-danger\">删除</button>";
            return  button;
        }


        /**
         * 跳转创建流程模型
         */
        $("#create").click(function createMole() {
            window.open("/models/create");
        });

        /**
         * 时间格式日期转换
         */
        function changeDateFormat(cellval) {
            if (cellval != null) {
                var date = new Date(cellval);
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

                return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
            }
        }

    })

    //初始化上传控件的样式
    $("#fileModel").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "/models/fileModel", //上传的地址
        allowedFileExtensions: ['zip'],//接收的文件后缀
        showUpload: true, //是否显示上传按钮
        showCaption: true,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        //dropZoneEnabled: false,//是否显示拖拽区域
        //minImageWidth: 50, //图片的最小宽度
        //minImageHeight: 50,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 1, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount:true,
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    });

    //导入文件上传完成之后的事件
    $("#fileModel").on("fileuploaded", function (event, data, previewId, index) {
        var data = data.response;
        if (data.code == "3") {
            alert(data.message);
            return;
        }
        if (data.code == "1") {
            location.reload();
        }
    });
</script>

</html>